<template>
  <div class="category">
    <!-- <van-nav-bar title="分类" /> -->
    <van-search
      v-model="searchWord"
      placeholder="搜点啥呢"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <div class="category-container">
      <div class="xxx">
 <van-badge-group :active-key="activeKey" @change="onChange">
        <van-badge
          v-for="item in categoryList"
          :key="item.cat_id"
          :title="item.cat_name"
          @click="getSecondList(item.cat_id)"
        />
      </van-badge-group>
      </div>
     
      <div class="category-body">
        <!-- <img src="../../assets/banner2.png" alt /> -->
        <ul>
          <li v-for="item in secondList" :key="item.cat_id" @click="getDetailList(item.cat_id)">
            <img :src="item.cat_image" alt />
            <p>{{item.cat_name}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import url from "@/utils/api.js";
import {
  Badge,
  BadgeGroup,
  List,
  TreeSelect,
  Search,
  Grid,
  GridItem
} from "vant";

export default {
  components: {
    [Badge.name]: Badge,
    [BadgeGroup.name]: BadgeGroup,
    [List.name]: List,
    [TreeSelect.name]: TreeSelect,
    [Search.name]: Search
  },
  data() {
    return {
      searchWord: "",
      activeKey: 0,
      categoryList: [],
      secondList: []
    };
  },
  methods: {
    onSearch() {
      console.log(this.searchWord);
      this.$router.push({
        name: "search",
        query: { keyword: this.searchWord }
      });
    },
    onChange(key) {
      console.log(key);
      this.activeKey = key;
      this.$router.push({ query: { cat_id: this.categoryList[key].cat_id } });
    },
    getSecondList(cat_id) {
      this.$axios({
        method: "get",
        url: url.category_list,
        params: {
          token: localStorage.getItem("token"),
          cat_id
        }
      }).then(res => {
        // console.log(res);
        this.secondList = res;
      });
    },
    getCategoryList() {
      this.$axios({
        method: "get",
        url: url.category_list,
        params: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        // console.log(res);
        this.categoryList = res;
        if (this.$route.query.cat_id) {
          res.forEach((e, i) => {
            if (this.$route.query.cat_id == e.cat_id) {
              this.activeKey = i;
            }
          });
          this.getSecondList(this.$route.query.cat_id);
        } else {
          this.getSecondList(this.categoryList[0].cat_id);
        }
      });
    },
    getDetailList(cat_id) {
      this.$router.push({
        name: "goodslist",
        query: {
          cat_id
        }
      });
    }
  },
  mounted() {
    this.getCategoryList();
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";
.category {
  .category-container {
    // border: 1px solid #f00;
    max-height: calc(100vh - 100px);
    display: flex;
    overflow-y: scroll;
    .category-body {
      overflow-y: scroll;
      background-color: #fff;
      flex: 1;
      padding-right: 10px;
      > img {
        max-width: 100%;
      }
      ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        // border: 1px solid #00f;
        li {
          // border: 1px solid #f00;
          text-align: center;
          flex-basis: 33.333%;
          padding: 5px 0;
          margin-bottom: 10px;
          img {
            margin-top: 10px;
            max-width: 70%;
          }
          p {
            margin-top: 10px;
            .font-dpr(12px);
            color: @fontColorP;
          }
        }
      }
    }
  }
}

.banner {
  height: 230px;
  width: 100%;
  vertical-align: middle;
}

.xxx {
  height: 83vh;
  overflow-y: scroll;
}
.van-badge-group {
  display: flex;
  flex-direction: column;
  margin-right: 8px;
  .van-badge {
    line-height: 0;
    padding: 0;
    height: 50px;
  }
  /deep/    .van-badge__text {
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 1;
      line-height: 50px;
      padding: 0 5px;
    }
  a {
    min-width: 80px;
    max-width: 100px;
    text-align: center;
    background-color: @bgColor;
    height: 80px;
  }
}
.van-badge--select {
  border-color: @priColor;
}
a.van-badge--select.van-badge:hover,
a.van-badge--select.van-badge:active {
  text-decoration: none;
}
</style>
